import BaseChart from '../../BaseChart.js'

/**
 * 二维矩阵图
 */
export default class Matrix extends BaseChart {
  constructor(id, data) {
    super(id, data);
    // 初始化数据
    this.data = data;
    // 格子
    this.lattice = null;
    this.xAxisName = null;
    this.yAxisName = null;
    // 行的长度
    this.rowLength = this.data.length;
    // 列的长度
    this.colLength = Object.keys(this.data[0]).length-1;
    // 图例位置
    this.legendElementWidth = 500
    this.legendElementHeight = 15
    this.legendElementX = -70;
    this.legendElementY = -60;
    // 颜色比例尺
    this.colorScale = null;
    // 字体属性
    this.fontSize = 9;
    this.legendFontSize = 15;
    this.legendFontWeight = 900;
    // 判断是否要加横纵属性
    this.isXlable = false;
    this.isYLable = false;
  }
  setFontSize(size){
    this.fontSize = size;
    return this;
  }
  setLegendFontSize(size){
    this.legendFontSize = size;
    return this;
  }
  setLegendFontWeight (weight) {
    this.legendFontWeight = weight;
    return this;
  }
  isShowXLable(e) {
    this.isXLable = e;
    return this;
  }
  isShowYLable(e) {
    this.isYLable = e;
    return this;
  }
  /**
   * 
   * @param {*} width 图例宽度
   * @param {*} height 图例高度
   * @param {*} x 相对于matrix的x位置
   * @param {*} y 相对于matrix的y位置
   */
  setLegendPosition(width, height, x, y) {
    this.legendElementWidth = width;
    this.legendElementHeight = height;
    this.legendElementX = x;
    this.legendElementY = y;
    return this;
  }
  /**
   * 
   * @param {*} colorNum 颜色种类数目
   * @param {*} colors 颜色种类数组
   */
  setColor(colorNum, colors) {
    this.colorNum = colorNum;
    this.colors = colors;
    return this;
  }

  init() {
    //初始化svg
    this.initSvg();
    //初始化主题内容部分
    this.initMainGroup();
    //初始化格子
    this.initMatrix();
    //初始化伸缩功能;
    this.initZoom();
    // 初始化容器
    this.initGroup();
    // 初始化箭头marker
    return this;
  }

  initGroup() {
    // 下标值组
    this.legendGroup = this.mg.append('g').attr("id","legendGroupGroup")
    // 格子组
    this.latticeGroup = this.mg.append('g')
    // 格子的横轴表示
    this.xlableGroup = this.mg.append('g')
    // 格子的纵轴表示
    this.ylableGroup = this.mg.append('g')
    
  }

  initZoom() {
    this.svg.call(d3.zoom()
      .on('zoom', this.zoomed)
    )
  }
  zoomed = (event) => {
		this.mg.attr('transform', `translate(${event.transform.x},${event.transform.y}) scale(${event.transform.k})`)
	}

  initMatrix() {
    this.xgridSize = parseFloat(+this.innerWidth / +this.colLength)
    this.ygridSize = parseFloat(+this.innerHeight / +this.rowLength);
  }


  // 创建二维矩阵图
  render(data) {
    if (data) {
      this.data = data;
    }
    this.renderData();
    // 更新比例尺
    this.renderScale()
    // 更新图例
    this.renderLegend()
    // 更新格子
    this.renderLattice()
    if(this.isXlable) {
       // 更新横轴表示
      this.renderX()
    }
    if(this.isYLable) {
      // 更新纵轴表示
    this.renderY()
    }
   
    
    return this;
  }
  renderData(){
    console.log(this.data);
    this.yAxisName = this.data.map(d=>d.name)
    this.xAxisName = Object.keys(this.data[0]).slice(1)
    console.log(this.data);
    this.data = this.data.map(d=>{
      delete d.name
      return d
    })
    console.log(this.data);
  }

  renderScale() {
    // 得到所有的数据
    let total_value = []
    this.data.forEach((d) =>{
      Object.values(d).forEach(function(e) {
        total_value.push(+e)
      })
    })
    this.colorScale = d3.scaleSequentialSqrt([0 ,d3.max([...total_value])],d3.interpolateBlues)
  }
  // 更新图例
  renderLegend() {
    this.legendlinear = this.legendGroup
      .append("defs")
      .attr("id","matrixdefs")
      .append("linearGradient")
      .attr("id", "matrixLegend")
      .attr("x1","0%")
      .attr("x2","100%")
      .attr("y1","0%")
      .attr("y2","0%")
    this.legendlinear
      .append("stop")
      .attr("offset","0%")
      .attr("stop-color","white")
    this.legendlinear
      .append("stop")
      .attr("offset","100%")
      .attr("stop-color","rgb(8,50,109)")
    this.matrixL = d3.select("#legendGroupGroup")
      .append("rect")
      .attr("fill","url(#matrixLegend)")
      .attr('width',`${this.legendElementWidth}px`)
      .attr('height',`${this.legendElementHeight}px`)
      .attr('x',+this.legendElementX)
      .attr('y',+this.legendElementY)
    this.legendGroup
      .append("text")
      .text("Conventional Signs")
      .attr('x',+this.legendElementX)
      .attr('y',+this.legendElementY - 4)
      .style("font-size",`${+this.legendFontSize}pt`)
      .style("font-weight",this.legendFontWeight) 
  }

  renderLattice() {    
    this.lattice = this.latticeGroup
      .selectAll("g")
      .data(this.data)
      .join('g')
        .selectAll('rect')
        .data((d,i)=>(Object.entries(d).map( ([key,val]) =>({
          value:+val,
          yindex:i
        })))) 
        .join('rect')
        .attr('width',this.xgridSize)
        .attr('height',this.ygridSize)
        .attr('x',(d,i)=>this.xgridSize * i)
        .attr('y',d=>d.yindex * this.ygridSize)
        .attr('fill',d=>this.colorScale(d.value))
        // .attr('stroke-width',1)
        // .attr('stroke','gray')
  }
  // 更新Y标志
  renderY() {
    this.xLabels = this.xlableGroup.selectAll("text")
      .data(this.yAxisName)
      .join("text")
      .text((d, i) => this.yAxisName[i])
      .attr("x", 0)
      .attr("y", (d, i) => i * this.ygridSize)
      .style("text-anchor", "end")
      .attr("transform", "translate(0," + +this.ygridSize + ")")
      .style("font-size",`${+this.fontSize}pt`)
  }
  // 更新X标志
  renderX() {
    this.yLabels = this.ylableGroup.selectAll("text")
      .data(this.xAxisName)
      .join("text")
      .text((d, i) => this.xAxisName[i])
      .attr("x",(d, i) => i * +this.xgridSize)
      .attr("y", -5)
      .style("font-size",`${+this.fontSize}pt`)
      .attr("transform", "translate(" + this.xgridSize / 4 + ", 0)")
  }
}